<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title> - 写信</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico">
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/font-awesome.css}" rel="stylesheet">
    <link th:href="@{/css/plugins/bootstrap-select/bootstrap-select.min.css}" rel="stylesheet">
    <link th:href="@{/css/plugins/summernote/summernote.css}" rel="stylesheet">
    <link th:href="@{/css/plugins/summernote/summernote-bs3.css}" rel="stylesheet">
    <link th:href="@{/css/animate.css}" rel="stylesheet">
    <link th:href="@{/css/style.css}" rel="stylesheet">
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-sm-12">
                <div class="mail-box-header">
                    <h2>
                    写信
                </h2>
                </div>
                <div class="mail-box">
                    <div class="mail-body">
                        <form class="form-horizontal email-from" method="post" th:action="@{/email/send.do}" autocomplete="off">
                            <input type="hidden" class="form-control" id="code" name="code" th:value="${code}" >
                            <input type="hidden" class="form-control" id="emailContent" name="emailContent">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">发送到：</label>

                                <div class="col-sm-4">
                                    <select class="selectpicker " name="emailAddress" multiple data-live-search="true" data-selected-text-format="count">
                                        <option th:each="user,userStat:${users}" th:value="${user.emailAddress}" th:text="${user.emailAddress}"></option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">主题：</label>

                                <div class="col-sm-6">
                                    <input type="text" class="form-control" name="emailSubject" value="">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">单次有效：</label>

                                <div class="col-sm-8">
                                    <div class="checkbox">
                                        <input type="checkbox" value=""></label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">上传附件：</label>
                                <div class="col-sm-8">
                                    <div class="btn-toolbar" role="toolbar">
                                        <div class="btn-group">
                                            <div type="button" class="btn btn-default" id="i_select_files">
                                                <span class="glyphicon glyphicon-plus-sign"></span> 添加文件</div>
                                        </div>
                                    </div>
                                    <div id="i_error_tips" class="alert alert-warning alert-dismissable" style="display: none">
                                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                        <strong> 提示： </strong> <span class="text-message"></span>
                                    </div>
                                    <table id="data_table" class="table tablesorter" style="display: none">
                                        <thead>
                                        <tr><th>文件</th>
                                            <th>进度</th>
                                            <th>大小</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody id="bootstrap-stream-container">
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">正文内容：</label>

                                <div class="col-sm-9">
                                    <div class="mail-text h-200">
                                        <div class="summernote">
                                            <h2>hAdmin后台主题</h2>
                                            <p>，她提供了诸多的强大的可以重新组合的UI组件，并集成了最新的jQuery版本，当然，也集成了很多功能强大，用途广泛的国内外jQuery插件及其他组件，她可以用于所有的Web应用程序，如<b>网站管理后台</b>，<b>网站会员中心</b>，<b>CMS</b>，<b>CRM</b>，<b>OA</b>等等，当然，您也可以对她进行深度定制，以做出更强系统。</p>
                                            </p>
                                        </div>
                                        <div class="clearfix"></div>
                                    </div>
                                    <div class="mail-body text-right tooltip-demo">
                                        <a class="btn btn-sm btn-primary send" data-toggle="tooltip" data-placement="top" title="Send"><i class="fa fa-reply"></i> 发送</a>
                                        <!--<a href="mailbox.html" class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top" title="Discard email"><i class="fa fa-times"></i> 放弃</a>-->
                                        <!--<a href="mailbox.html" class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top" title="Move to draft folder"><i class="fa fa-pencil"></i> 存为草稿</a>-->
                                    </div>
                                    <div class="clearfix"></div>
                                </div>
                            </div>
                        </form>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <!-- 全局js -->
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/plugins/layer/layer.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/plugins/toastr/toastr.min.js}"></script>
    <script th:src="@{/js/plugins/toastr/toastr.tool.js}"></script>
    <script th:src="@{/js/plugins/bootstrap-select/bootstrap-select.js}"></script>
    <script th:src="@{/js/plugins/bootstrap-select/defaults-zh_CN.js}"></script>

    <!-- 自定义js -->
    <script th:src="@{/js/content.js}"></script>

    <script th:src="@{/js/stream-v1.js}"></script>
    <!-- iCheck -->
    <script th:src="@{/js/plugins/iCheck/icheck.min.js}"></script>
    <!-- SUMMERNOTE -->
    <script th:src="@{/js/plugins/summernote/summernote.min.js}"></script>
    <script th:src="@{/js/plugins/summernote/summernote-zh-CN.js}"></script>



    <script th:inline="javascript">
        $(document).ready(function () {
            $('.i-checks').iCheck({
                checkboxClass: 'icheckbox_square-green',
                radioClass: 'iradio_square-green',
            });


            $('.summernote').summernote({
                lang: 'zh-CN'
            });

        });
        var edit = function () {
            $('.click2edit').summernote({
                focus: true
            });
        };
        var save = function () {
            var aHTML = $('.click2edit').code(); //save HTML If you need(aHTML: array).
            $('.click2edit').destroy();
        };

        /**
         * 发送邮件
         */
        $('.send').click(function(){
            var comment=$(".summernote").code();
            $('#emailContent').val(comment);
            $('.email-from').submit();
        });


        /**
         * 配置文件（如果没有默认字样，说明默认值就是注释下的值）
         * 但是，on*（onSelect， onMaxSizeExceed...）等函数的默认行为
         * 是在ID为i_stream_message_container的页面元素中写日志
         */
        var config = {
            enabled: true, /** 是否启用文件选择，默认是true */
            customered: true,
            multipleFiles: true, /** 是否允许同时选择多个文件，默认是false */
            autoRemoveCompleted: false, /** 是否自动移除已经上传完毕的文件，非自定义UI有效(customered:false)，默认是false */
            autoUploading: true, /** 当选择完文件是否自动上传，默认是true */
            fileFieldName: "FileData", /** 相当于指定<input type="file" name="FileData">，默认是FileData */
            maxSize: 2147483648, /** 当_t.bStreaming = false 时（也就是Flash上传时），2G就是最大的文件上传大小！所以一般需要 */
            simLimit: 10000, /** 允许同时选择文件上传的个数（包含已经上传过的） */
		// extFilters: [".txt", ".gz", ".jpg", ".png", ".jpeg", ".gif", ".avi", ".html", ".htm"], /** 默认是全部允许，即 [] */
            browseFileId : "i_select_files", /** 文件选择的Dom Id，如果不指定，默认是i_select_files */
            browseFileBtn : "<div>请选择文件</div>", /** 选择文件的按钮内容，非自定义UI有效(customered:false) */
            // dragAndDropArea: "i_stream_dropzone",
            filesQueueId : "i_stream_files_queue", /** 文件上传进度显示框ID，非自定义UI有效(customered:false) */
            filesQueueHeight : 450, /** 文件上传进度显示框的高，非自定义UI有效(customered:false)，默认450px */
            tokenURL :[[${ctx}]]+"/tk",
            uploadURL:[[${ctx}]]+"/upload",
            postVarsPerFile:{"code":$('#code').val()},
            messagerId : "i_stream_message_container", /** 消息框的Id，当没有自定义onXXX函数，系统会显示onXXX的部分提示信息，如果没有i_stream_message_container则不显示 */
//		frmUploadURL : "http://customers.duapp.com/fd;", /** Flash上传的URI */
//      uploadURL : "http://customers.duapp.com/upload",
            onSelect: function(files) {
                //console && console.log("-------------onSelect-------------------");
                //console && console.log(files);
                //console && console.log("-------------onSelect-------------------End");
            },
            onMaxSizeExceed: function(file) {
                //console && console.log("-------------onMaxSizeExceed-------------------");
                //console && console.log(file);
                $('#i_error_tips').show();
                $("#i_error_tips > span.text-message").append("文件[name="+file.name+", size="+file.formatSize+"]超过文件大小限制‵"+file.formatLimitSize+"‵，将不会被上传！<br>");
                //console && console.log("-------------onMaxSizeExceed-------------------End");
            },
            onFileCountExceed : function(selected, limit) {
                //console && console.log("-------------onFileCountExceed-------------------");
                //console && console.log(selected + "," + limit);
                $('#i_error_tips').show();
                $("#i_error_tips > span.text-message").append("同时最多上传<strong>"+limit+"</strong>个文件，但是已选择<strong>"+selected+"</strong>个<br>");
                //console && console.log("-------------onFileCountExceed-------------------End");
            },
            onExtNameMismatch: function(info) {
                //console && console.log("-------------onExtNameMismatch-------------------");
                //console && console.log(info);
                $('#i_error_tips').show();
                $("#i_error_tips > span.text-message").append("<strong>"+info.name+"</strong>文件类型不匹配[<strong>"+info.filters.toString() + "</strong>]<br>");
                //console && console.log("-------------onExtNameMismatch-------------------End");
            },
            onRepeatedFile: function(file) {
                 // console.log("文件： " + file.name + " 大小：" + file.size + "已存在于上传队列中");
                // $('#i_error_tips').show();
                // $("#i_error_tips > span.text-message").append("文件： " + file.name
                //     + " 大小：" + file.size + "已存在于上传队列中");
                return true;
            },
            onAddTask: function(file) {
                console.log(file);
                $('#data_table').show();
                var str = '<tr id="' + file.id + '" class="template-upload fade in">' +
                                '<td><span class="preview">'+file.name+'</span></td>' +
                                '<td>'+
                                '    <div><span class="label label-info">进度：</span> <span class="message-text"></span></div>' +
                                '    <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">' +
                                '			<div class="progress-bar progress-bar-success" title="" style="width: 0%;"></div>' +
                                '		</div>' +
                                '</td>' +
                                '<td>' +
                                    '<p class="size">' + file.formatSize + '</p>' +
                                '</td>' +
                                '<td>' +
                                    '<div class="glyphicon glyphicon-remove" style="cursor: pointer" onclick="deleteFile(\'' + file.id + '\')"><i></i></div>' +
                                '</td>' +
                            '</tr>';
                $("#bootstrap-stream-container").append(str);
            },
            onUploadProgress: function(file) {
                //console && console.log("-------------onUploadProgress-------------------");
                //console && console.log(file);

                var $bar = $("#"+file.id).find("div.progress-bar");
                $bar.css("width", file.percent + "%");
                var $message = $("#"+file.id).find("span.message-text");
                $message.text("已上传:" + file.formatLoaded + "/" + file.formatSize + "(" + file.percent + "%" + ") 速  度:" + file.formatSpeed);

                // var $total = $("#stream_total_progress_bar");
                // $total.find("div.progress-bar").css("width", file.totalPercent + "%");
                // $total.find("span.stream_total_size").html(file.formatTotalLoaded + "/" + file.formatTotalSize);
                // $total.find("span.stream_total_percent").html(file.totalPercent + "%");

                //console && console.log("-------------onUploadProgress-------------------End");
            },
            onStop: function() {
                //console && console.log("-------------onStop-------------------");
                //console && console.log("系统已停止上传！！！");
                //console && console.log("-------------onStop-------------------End");
            },
            onCancel: function(file) {
                //console && console.log("-------------onCancel-------------------");
                //console && console.log(file);

                $("#"+file.id).remove();

                // var $total = $("#stream_total_progress_bar");
                // $total.find("div.progress-bar").css("width", file.totalPercent + "%");
                // $total.find("span.stream_total_size").text(file.formatTotalLoaded + "/" + file.formatTotalSize);
                // $total.find("span.stream_total_percent").text(file.totalPercent + "%");
                //console && console.log("-------------onCancel-------------------End");
            },
            onCancelAll: function(numbers) {
                //console && console.log("-------------onCancelAll-------------------");
                //console && console.log(numbers + " 个文件已被取消上传！！！");
                $('#i_error_tips').show();
                $("#i_error_tips > span.text-message").append(numbers + " 个文件已被取消上传！！！");

                //console && console.log("-------------onCancelAll-------------------End");
            },
            onComplete: function(file) {
                //console && console.log("-------------onComplete-------------------");
                //console && console.log(file);

                /** 100% percent */
                var $bar = $("#"+file.id).find("div.progress-bar");
                $bar.css("width", file.percent + "%");
                var $message = $("#"+file.id).find("span.message-text");
                $message.text("已上传:" + file.formatLoaded + "/" + file.formatSize + "(" + file.percent + "%" + ")");

                /** modify the total progress bar */
                // var $total = $("#stream_total_progress_bar");
                // $total.find("div.progress-bar").css("width", file.totalPercent + "%");
                // $total.find("span.stream_total_size").text(file.formatTotalLoaded + "/" + file.formatTotalSize);
                // $total.find("span.stream_total_percent").text(file.totalPercent + "%");

                //console && console.log("-------------onComplete-------------------End");
            },
            onQueueComplete: function(msg) {
                //console && console.log("-------------onQueueComplete-------------------");
                //console && console.log("-------------onQueueComplete-------------------End");
            },
            onUploadError: function(status, msg) {
                //console && console.log("-------------onUploadError-------------------");
                //console && console.log(msg + ", 状态码:" + status);
                $('#i_error_tips').show();
                $("#i_error_tips > span.text-message").append(msg + ", 状态码:" + status);

                //console && console.log("-------------onUploadError-------------------End");
            }
        };
        var _t = new Stream(config);
        /** 不支持拖拽，隐藏拖拽框 */
        if (!_t.bDraggable) {
            $("#i_stream_dropzone").hide();
        }

        /** Flash最大支持2G */
        if (!_t.bStreaming) {
            _t.config.maxSize = 2147483648;
        }

        /**
         * 删除文件
         */
        function deleteFile(id){
            parent.layer.confirm("确认删除附件？",{btn: ['确定', '取消'], title: "提示"},function (index) {
                $('#'+id).remove();
                parent.layer.close(index);
            });
        }
    </script>
</body>

</html>
